<template>
  <div class="container">
    <div id="myCanvasContainer">
      <canvas id="myCanvas" ref="canvas"></canvas>
    </div>
    <div id="tags">
      <ul>
        <li v-for="item in members" :key="item.id"><a>{{item.num}}</a></li>
      </ul>
    </div>
    <div class="fixed">
      <a-button :disabled="running" size="small" type="danger" @click="start" ghost>开始</a-button>
      <a-button :disabled="!running" size="small" type="danger" @click="stop" ghost>停止</a-button>
      <a-button size="small" type="danger" @click="reset" ghost>重载</a-button>
    </div>
    <div class="mask" v-show="visible">
      <div class="win">{{winner.num}}</div>
    </div>
  </div>
</template>

<script>
  import 'jquery-tagcanvas'
  import { getAllUser, setWinner } from '@/api/member'
  export default {
    name: 'Lottery',
    data () {
      return {
        running: false,
        members: [],
        visible: false,
        winner: {}
      }
    },
    created () {
      this.getUser()
    },
    mounted () {
      const canvas = this.$refs.canvas
      canvas.width = document.body.offsetWidth
      canvas.height = document.body.offsetHeight
      this.$nextTick(() => {
        setTimeout(() => {
          this.init()
        }, 1000)
      })
    },
    methods: {
      getUser () {
        getAllUser().then(res => {
          this.members = res.result.data
        })
      },
      init () {
        try {
          $('#myCanvas').tagcanvas({
            textColour: '#f5dc24',
            dragControl: true,
            decel: 0.95,
            textHeight: 24,
            reverse: true,
            initial: [0.1, 0.1],
            noSelect: true,
            shadowBlur: 3,
            txtScale: 5,
            shadow: '#f39818'
          }, 'tags')
        } catch (e) {

        }
      },
      reset () {
        this.getUser()
        this.visible = false
      },
      start () {
        $('#myCanvas').tagcanvas({
          textColour: '#f5dc24',
          dragControl: true,
          decel: 0.95,
          textHeight: 24,
          reverse: true,
          noSelect: true,
          shadowBlur: 3,
          txtScale: 5,
          shadow: '#f39818',
          initial: [0.5, 1]
        }, 'tags')
        this.running = true
      },
      stop () {
        $('#myCanvas').tagcanvas({
          textColour: '#f5dc24',
          dragControl: true,
          decel: 0.95,
          textHeight: 24,
          reverse: true,
          initial: [0.1, 0.1],
          noSelect: true,
          shadowBlur: 3,
          txtScale: 5,
          shadow: '#f39818'
        }, 'tags')
        const app = this
        app.winner = app.members[Math.floor(Math.random() * app.members.length)]
        setWinner(app.winner.id, {}).then(res => {
        }).finally(() => {
          app.running = false
          app.visible = true
          app.getUser()
        })
      },
      randomNum (min, max) {
        return Math.floor(Math.random() * (max - min)) + min
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
    background: url('../../assets/100.jpg') center no-repeat;
    background-size: cover;
  }
  .fixed {
    width: 100%;
    position: fixed;
    bottom: 10px;
    left: 0;
    z-index: 999;
  }
  .mask{
    position: fixed;
    left: 50%;top: 50%;transform: translate(-50%, -50%);
    z-index: 1;
    background-color: rgba( 0, 0, 0, 0.6);
    animation: maskBg 1s;
    animation-fill-mode: forwards;
  }
  .mask .win{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0;
    font-weight: 700;
    text-shadow: 0 0 20px #c55e00;
    color: #f9e315;
    animation: maskWin 0.7s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }
  @keyframes maskBg {
    from{width: 0;height: 0;}
    to{width: 100%;height: 100%}
  }
  @keyframes maskWin {
    from{font-size: 0;opacity: 0}
    to{font-size: 120px;opacity: 1}
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
  }
</style>
